<template>
  <el-dialog title="项目编辑" width="50%" :before-close="dialogClose" :visible.sync="show">
    <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="项目名称">
          <el-input v-model="form.name" class="select_input"></el-input>
        </el-form-item>
        <el-form-item label="手工费">
          <el-input v-model="form.fee" type="float" class="select_input"></el-input>
        </el-form-item>
        <el-form-item label="选择物品">
          <el-select v-model="index" placeholder="选择物品" @change="goodsChange">
            <el-option v-for="(item,index) in goods" :key="index" :label="item.name" :value="index"></el-option>
          </el-select>
        </el-form-item>
        <el-table :data="list" style="width: 100%" border>
            <el-table-column prop="name" label="物品名称" align="center"></el-table-column>
            <el-table-column label="使用数量" align="center">
              <template slot-scope="scope">            
                <el-input v-model="scope.row.use_num" @input="inputNum" placeholder="使用数量" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
              <el-button type="danger" size="small" icon="el-icon-delete" slot="reference"
                @click="del(scope)"></el-button>
              </template>
            </el-table-column>
        </el-table>
        <div align="center" style="margin-top:10px;">
          <el-button type="primary" @click="add">确 定</el-button>
          <el-button @click="dialogClose">取 消</el-button>
        </div>
        </el-form-item>
      </el-form>
    </el-dialog>
</template>
 
<script>
export default {
  name: 'cardEdit',
  props:['show','form','goods'],
  data() {
    return {
      index:0,
      list:[]
    }
  },
  created: function() {
    
  },
  methods: {
    dialogClose:function(){
      this.$emit("func",{'key':'cardAdd'})
    },
    goodsChange:function(e){
      if(e > 0){
          var arr = this.goods[e]
          var goods_list = this.list
          var list = goods_list.concat(arr)
          this.list = list
      }
    },
    inputNum:function(e){
      //console.log(this.list)
    },
    del:function(e){
      this.list.splice(e.$index,1)
    },
    add:function(){
      if(!this.form.name){
        this.$message.error('请填写项目名称!!');
        return;
      }
      if(!this.form.fee){
        this.$message.error('请填写手工费!!');
        return;
      }
      if(this.list.length == 0){
        this.$message.error('请选择使用物品!!');
        return;
      }
      for(var x in this.list){
				if(!this.list[x]['use_num']){
          this.$message.error('请输入使用物品的数量!!');
					return;
				}
			}
      this.form.goods = this.list
      this.form.oa_id = localStorage.getItem('oa_id')
      var that = this
      this.$post('manage/card/add',this.form).then((res) => {
          if(res.code == 1){
            that.$message.success('添加成功!!');
            that.item = {}
            that.$emit("func",{'key':'cardAdd','type':1})
          }else{
            that.$message.error(res.msg);
          }
      })
    }
  }
}
</script>